<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          @submit.prevent
        >
          <el-form-item label="" prop="keys">
            <el-input
              placeholder="请输入进件号|身份证|数据源"
              clearable
              v-model="queryParams.searchValue"
              style="width: 250px; height: 35px"
              @change="handleQuery()"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['ds:record:remove']"
              >删除
            </el-button>
          </el-form-item>
        </el-form>

        <el-table
          border
          v-loading="loading"
          :data="list"
          ref="tableRef"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" width="50px" type="index" />
          <el-table-column
            label="进件标识"
            prop="appNo"
            width="220px"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="数据源"
            prop="appCode"
            width="150px"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="请求参数"
            prop="reqParams"
            :show-overflow-tooltip="true"
          />

          <el-table-column label="响应报文">
            <template #default="scope">
              <p
                @click="bodyJson(scope.row.repBody)"
                v-if="scope.row.repBody"
              >
                {{ scope.row.repBody.substr(0, 20) }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="调用结果"
            prop="repFlag"
            width="120px"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <el-tag
                size="large"
                type="success"
                v-if="scope.row.callStatus == 1"
                style="width: 80%"
              >
                成功
              </el-tag>
              <el-tag size="large" type="danger" v-else style="width: 80%">
                失败
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="说明"
            prop="remark"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="创建时间" prop="createTime" width="180px" />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="reload()"
        />
      </el-col>
    </el-row>
  </div>
  <div>
    <JsonView
      v-model:visible="responseBodyDialogVisible"
      v-if="responseBodyDialogVisible"
      :data="repBody"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { dsAgreementApi } from "@/api/kernel/ds-agreement.js";
import { ElMessageBox, ElMessage } from "element-plus";
import JsonView from "@/views/kernel/common/json-view/index.vue";

const responseBodyDialogVisible = ref(false);
const repBody = ref("");
const bodyJson = (val) => {
  repBody.value = val;
  responseBodyDialogVisible.value = true;
};

const tableRef = ref(null);

const total = ref(0);
const list = ref([]);
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const loading = ref(true);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  searchValue: "",
});

const resetQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.searchValue = "";
  reload();
};

const multiple = ref(true);
const ids = ref([]);
const handleSelectionChange = (selection) => {
  multiple.value = !selection.length;
  ids.value = selection.map((item) => {
    return item.id;
  });
};
const handleDelete = () => {
  ElMessageBox({
    title: `Title`,
    message: h("p", null, [h("span", null, "确认要删除? ")]),
    showCancelButton: true,
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      dsAgreementApi
        .deleteRecord(props.data.delUrl, ids.value)
        .then((res) => {});
      setTimeout(() => {
        ElMessage({
          type: "success",
          message: `删除成功！`,
        });
        reload();
      }, 1000);
    })
    .catch(() => {
      tableRef.value.clearSelection();
    });
};

const handleQuery = () => {
  reload();
};

const reload = () => {
  dsAgreementApi
    .getCallRecordPageList(props.data.listUrl, queryParams.value)
    .then((res) => {
      list.value = res.rows;
      total.value = res.total;
      loading.value = false;
    });
};
onMounted(() => {
  reload();
});
</script>
